<template>
    <div>
                       <mu-appbar style="width: 100%;" title="组织认证" color="primary">  
                <mu-button icon slot="left" to="/setO">
                <mu-icon value="arrow_back"></mu-icon>
                </mu-button>
                <mu-button flat slot="right"><mu-icon value="home"></mu-icon></mu-button>
                </mu-appbar>
         
         <mu-container>
            <mu-form ref="form" :model="validateForm" class="mu-demo-form" label-position="left">


            <mu-form-item label="组织负责人姓名"  >
            <mu-text-field v-model="validateForm.Zname"  ></mu-text-field>
            </mu-form-item>
            <mu-form-item label="证件号码">
            <mu-text-field v-model="validateForm.number" ></mu-text-field>
            </mu-form-item>
            <mu-form-item label="手持证件照">
               <el-upload
                        class="avatar-uploader"
                        :action= domain
                        :http-request = upqiniu
                        :show-file-list="false"
                        :limit=1
                        :before-upload="beforeUpload">
                        <img v-if="validateForm.idcard" :src="validateForm.idcard" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
            </mu-form-item>
            <mu-form-item>
            <mu-button color="primary" @click="submit">提交</mu-button>
            <mu-button @click="clear">重置</mu-button>
            </mu-form-item>
            </mu-form>
            </mu-container> 
    </div>
</template>
<script>
import axios from "axios";
import Toast from 'muse-ui-toast';

export default {
    data(){
return{
           token: {},
     // 七牛云的上传地址，华南区
     domain: 'https://upload-z2.qiniup.com',
      // 这是七牛云空间的外链默认域名
      qiniuaddr: 'p9zybqbtm.bkt.clouddn.com',
    
     
      validateForm: {
        idcard:'',
        Zname:'',
        number:''
      }
}
    

    },
  methods:{

        clear () {
      this.$refs.form.clear();
 
      this.validateForm = {


      };
    },
        submit () {
     this.$refs.form.validate().then((result) => {
           axios.post('/api/user/Renzheng',{data:this.validateForm}).then(result=>{
             if(result.data=="申请成功"){
               Toast.success('申请成功，请重新登录,等待管理员审核')
               setTimeout(() => {this.$router.push('/login') }, 1500);
             }else if(result.data=="证件已被注册"){
               Toast.error('证件已被注册')
             }else{
               Toast.error('申请失败')
             }
           })
      });
    },
    // 上传文件到七牛云

                upqiniu (req) {
                console.log(req)
                const config = {
                    headers: {'Content-Type': 'multipart/form-data'}
                }
                let filetype = ''
                if (req.file.type === 'image/png') {
                    filetype = 'png'
                } else {
                    filetype = 'jpg'
                }
                // 重命名要上传的文件
                const keyname = 'adver' + + new Date() + Math.floor(Math.random() * 100)  +'.' +filetype
                // 从后端获取上传凭证token
                axios.get('/api/token').then(res => {
                    console.log(res)
                    const formdata = new FormData()
                    formdata.append('file', req.file)
                    formdata.append('token', res.data)
                    formdata.append('key', keyname)
                    // 获取到凭证之后再将文件上传到七牛云空间
                    axios.post(this.domain, formdata, config).then(res1 => {
                    let pic_url='http://' + this.qiniuaddr + '/' + res1.data.key
                    this.validateForm.idcard=pic_url
                     console.log('上传')      
                    })
                })
                },
                    // 验证文件合法性
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        console.log('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
       console.log('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>